<template>
  <div class="ConsumingProbably">
    <div class="topbox">
      <el-form ref="form" :model="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="yonghulist"
                    @updateModelValue="updateModelValue"
                    :valuekey="{ name: 'name', value: 'orgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用能单元">
                  <FilterSelect2
                  :valuekey="{ name:'name',value:'id'}" 
                  :optionlist="options"
                  v-model="form.tagId"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="能源类型">
                  <FilterSelect2
                  :valuekey="{ name:'text',value:'value'}" 
                  :optionlist="typelist"
                  v-model="form.energyType"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: 4px;display: flex;">
                <el-radio-group v-model="form.dateType" size="small" style="margin-right: 20px;">
                  <el-radio-button  label="1">日</el-radio-button>
                  <el-radio-button  label="2">月</el-radio-button>
                  <el-radio-button  label="3">年</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="form.dateType=='1'" v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" style="flex: 1;"></el-date-picker>
                <el-date-picker v-else-if="form.dateType=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" style="flex: 1;"></el-date-picker>
                <el-date-picker v-else v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small" style="flex: 1;"> </el-date-picker>
              </el-col>
              <el-col :span="3" style="text-align: right;margin-top: 4px;">
                  <el-button  size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="submit">查 询</el-button>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <onemonidey ref="onemonideyref"></onemonidey>
      <twomonidey ref="twomonidey"></twomonidey>
    </div>
  </div>
</template>
<script>
import onemonidey from './onemonidey.vue'
import twomonidey from './twomonidey.vue'
import {getequiptreeapi} from '@/api/energy-consumption/energy-consuming/ConsumingConfiguration'
import {getEnergyTypeApi} from '@/api/energy-consumption/Basic-information/Price-scheme'
import dayjs from 'dayjs'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
export default {
  name: 'CallPoliceIndex',
  components: {
    onemonidey,
    twomonidey
  },
  data() {
    return {
      form: {
        energyType:'',
        dateType: '1',
        orgNo: '',
        tagId:''
      },
      value1:'',
      value2:'',
      value3:'',
      options: [],
      typelist:[],
      yonghulist:[]
    };
  },

  async mounted() {
    const { data: { list } } = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    const orgno = this.yonghulist.find(ele => ele.id == companyId)?.orgNo
    this.$set(this.form, 'orgNo',orgno?orgno: list[0]?.orgNo)
    await this.updateModelValue(this.form.orgNo)
    this.$set(this.form, 'tagId', this.options[0]?.id)
    const { data: { list:array } } = await getEnergyTypeApi()
    this.typelist = array
    this.$set(this.form,'energyType',this.typelist[0]?.value)
    this.gettime()
    this.submit()
  },

  methods: {
    submit() {
      if(!this.form.tagId) return this.$message.warning('请先选择用能单元')
      const dateString = this.form.dateType == '1' ? this.value1 : this.form.dateType == '2' ? this.value2 : this.value3
      this.$refs.onemonideyref.getarrmethods({...this.form, dateString})
      this.$refs.twomonidey.getechart({...this.form, dateString})
     },
    gettime() {
      this.$set(this,'value1',dayjs().format('YYYY-MM-DD'))
      this.$set(this,'value2',dayjs().format('YYYY-MM'))
      this.$set(this,'value3',dayjs().format('YYYY'))
    },
    async chongzhi() { 
      this.form = { energyType: '', dateType: '1', orgNo: '', tagId: '' }
      const companyId = localStorage.getItem('companyId')
      const orgno= this.yonghulist.find(ele=>ele.id == companyId)?.orgNo
      this.$set(this.form, 'orgNo',orgno?orgno: list[0]?.orgNo)
      await this.updateModelValue(this.form.orgNo)
      this.$set(this.form, 'tagId', this.options[0]?.id)
      this.$set(this.form,'energyType',this.typelist[0]?.value)
      this.gettime()
      this.submit()
    },
        // 获取用能单元
    async updateModelValue(val) {
      const id=this.yonghulist.find(ele=>ele.orgNo==val).id
      localStorage.setItem('companyId', id)
      const { data: { list } } = await getequiptreeapi()
      this.options = list.find(ele => ele.id == val).tagList
      this.$set(this.form,'tagId',this.options[0].id?this.options[0].id:'')
    },
  },
};
</script>
<style scoped>
.ConsumingProbably{
  height:100%;
  padding: 10px;
  .topbox{
    background-color: #fff;
    height: 80px;
    padding: 20px;
    margin-bottom: 10px;
  }

}
</style>